<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Alarms</title>
    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }
        
        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
        }
        
        body > .el-container {
            margin-bottom: 40px;
        }
    </style>
    <!-- vue2 -->
    <script src="script/vue_2.js"></script>
    <!-- element 引入样式 -->
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
    <!-- element 引入组件库 -->
    <script src="./element-ui/lib/index.js"></script>
    <!-- jquery 3.6 -->
    <script src="script/jquery-3.6.0.min.js"></script>
    <script>
        var app;
        $(function(){
            app = new Vue({
                el: '#app',
                data: {
                    RaiseNew:{
                        Name: "NewAlarm",
                        Level: 3,
                        Tip: "参数超出限制"
                    },
                    CancelNew:{
                        Name: "NewCancel"
                    },
                    NoticeList:[]
                },
                methods:{
                    RaiseAlarm: function(){
                        let alertType = "info";
                        if(app.RaiseNew.Level == 1)
                            alertType = "error";
                        if(app.RaiseNew.Level == 2)
                            alertType = "warning";
						this.NoticeList.splice(0,0,{ title:this.RaiseNew.Name, type:alertType, description:this.RaiseNew.Tip});
                        //this.NoticeList.push({ title:this.RaiseNew.Name, type:alertType, description:this.RaiseNew.Tip});
                    },
                    CancelAlarm: function(){
                        this.NoticeList.push({ title:this.CancelNew.Name, type:"success", description:"警报已取消"});
                    }
                }
            });
        });
    </script>
</head>
<body>
    <div id="app">
        <el-row :gutter="10">
            <el-col :span="12">
                <el-container>
                    <el-header>引发警报</el-header>
                    <el-main>
                        <el-row>
                            <el-col :span="6">名称</el-col>
                            <el-col :span="18">
                                <el-input v-model="RaiseNew.Name" />
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">等级</el-col>
                            <el-col :span="18">
                                <el-input v-model="RaiseNew.Level" />
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">描述</el-col>
                            <el-col :span="18">
                                <el-input v-model="RaiseNew.Tip" />
                            </el-col>
                        </el-row>
                    </el-main>
                    <el-button v-on:click="RaiseAlarm">引发警报</el-button>
                </el-container>
            </el-col>
            <el-col :span="12">
                <el-container>
                    <el-header>取消警报</el-header>
                    <el-main>
                        <el-row>
                            <el-col :span="6">名称</el-col>
                            <el-col :span="18">
                                <el-input v-model="CancelNew.Name" />
                            </el-col>
                        </el-row>
                    </el-main>
                    <el-button v-on:click="CancelAlarm">取消警报</el-button>
                </el-container>
            </el-col>
        </el-row>
        <el-container>
            <el-header>通知列表</el-header>
            <el-main>
                <el-tabs>
                    <el-tab-pane label="表格视图">
                        <el-table :data="NoticeList">
                            <el-table-column prop="title" label="名称" :span="6"></el-table-column>
                            <el-table-column prop="type" label="类型" :span="4"></el-table-column>
                            <el-table-column prop="description" label="描述" :span="14"></el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="列表视图">
                        <el-alert v-for="(item, i) in NoticeList"
                        :title="item.title"
                        :type="item.type"
                        :description="item.description"
                        show-icon
                        :closable="false">
                      </el-alert>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
    </div>
</body>